<script lang="ts" setup>
import { ref } from 'vue'

import { shallowRef } from 'vue'
import { Empty } from 'ant-design-vue'
import { BasicDrawer as BDrawer } from '@/components/Drawer'
import { useDrawer } from '@/hooks/core'
import { RelateCheckType } from '@/components/TableList'
import { isArray } from '@/utils/is'

import { GetList_GetListResponse } from '@/types/modules/HotelConfig'
import { basicColumnsConfigData } from './tableData'
import { TableList, BasicTable } from '@/components/TableList'
import { useTableGrid } from '@/hooks/core'
import * as api from '@/api/modules/HotelConfig'

const basicTableInstance = ref()
const [{ basicColumns, dataSource, pagination }, tableMethods] =
  useTableGrid<GetList_GetListResponse>({
    columns: basicColumnsConfigData,
    isMounted: true,
    basicTableInstance: basicTableInstance,
    api: api.GetList
})
const { getDataList, onChangePage } = tableMethods

defineExpose(tableMethods)
</script>
<template>
  <div class="list-wrapper">
    <table-list
      title=""
      v-bind="{ basicColumns }"
      v-container:table-header-wrapper="'area_table_head'"
      :show-actions="!!$slots.operate"
      @refresh="getDataList"
    >
      <template #toolbar v-if="$slots.toolbar">
        <slot name="toolbar"></slot>
      </template>
      <template #tableContent="{ columns, selectChecked }">
        <basic-table
          ref="basicTableInstance"
          :select-checked="selectChecked"
          :row-key="(record: GetList_GetListResponse)=>record.Id"
          v-bind="{ columns, dataSource, pagination }"
          v-container:ant-table-content="'area_table'"
          @change="onChangePage"
        >
          <template #operate="row" v-if="$slots.operate">
            <slot name="operate" v-bind="row"></slot>
          </template>
        </basic-table>
      </template>
    </table-list>
  </div>
</template>
